<template>
    <top/>
    <div style="background-color:whitesmoke">
        <div class="headerTop">
        
            <div class="headerTop-left">
            <!--   <a href="/" @click="toIndex">首页</a><span style="font-size: 12px;"> >个人主页 </span> -->
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>个人主页</el-breadcrumb-item>
            </el-breadcrumb>
            </div>

        </div>

        <div class="top1">
            <div class="topContent1">
                <div class="top1Middle">
                    <div class="leftAvatar">
                        <el-image :src="Path.imgPath + user.icon"></el-image>
                    </div>
                    <div class="middleContent">
                        <ul>
                            <li>
                                <a href="#">
                                   <span style="font-size: 24px;">{{user.phone}}</span> 
                                </a>
                            </li>
                            <li style="margin-top: 10px;">
                                <span style="font-size: 16px;">账户名： {{ user.nickName }}</span>
                            </li>
                            <li>
                               <!-- 不考虑做等级，这地方就需要替换。 --> 
                                <el-button>V0等级></el-button>
                                <el-button @click="deliveryAddressButton">收货地址></el-button>
                            </li>
                        </ul>
                    </div>
                    <div class="rightContent">
                        <ul style="border: 0;">
                                <el-button  :icon="purseJinbi" style="font-size: 48px" @click="goTo_myPurse"><span style="font-size:24px ;margin-left: 10px">我的钱包</span></el-button> 
                        </ul>
                        <ul>
                                <el-button  :icon="pOrder" style="font-size: 48px"  @click="goTo_myPurse1"><span style="font-size:24px ;margin-left: 10px">我的账单</span></el-button> 
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="top2">
            <div class="topContent2">
                <div class="topContent2-top">
                    <div style="margin-top:12px">
                      <!-- 跳转我的订单 -->  <a  @click="turn('/trolley')" style="font-size: 24px;">我的订单</a>
                    </div>
                    <div style="margin-top:12px" class="topRight">
                        <a  @click="turn('/trolley')" style="font-size: 14px;">全部订单 ></a>
                    </div>    
                </div>
                <div class="topContent-bottom">
                    <div class="topContent-bottomContent">
                        <!-- 1 -->
                        <ul @click="turnTrolley('dfk')">
                            <li>
                                <el-button :icon="purse" style="font-size: 48px; " ></el-button>
                            </li>
                            <li>
                                <a href="" style="font-size: 12px;" >待付款</a>
                            </li>
                        </ul>

                        <!-- 2 -->
                        <ul  @click="turnTrolley('dfh')">
                            <li>
                                <el-button :icon="box" style="font-size: 48px;"></el-button>
                            </li>
                            <li>
                                <a href="" style="font-size: 12px;">待发货</a>
                            </li>
                        </ul>

                        <!-- 3 -->
                        <ul @click="turnTrolley('dsh')">
                            <li>
                                <el-button :icon="backMoney" style="font-size: 48px;"></el-button>
                            </li>
                            <li>
                                <a href="" style="font-size: 12px;">待收货</a>
                            </li>
                        </ul>

                    </div>
                </div>

            </div>
        </div>

        <div class="top3">
            <div class="topContent3">
                <div>

                    <div class="topContent3-top">

                    <div style="margin-top:12px">
                        <a href="" style="font-size: 24px;">服务工具</a>
                    </div>

                    </div>

                    <div class="topContent3-bottom">
                       
                        <div class="topContent3-bottomContent">
                        <!-- 1 -->   
                            <ul>
                                <div style="padding-bottom: 12px; ">
                                    <div style=" height:95px; font-size: 12px; ">
                                        
                                        <div style="padding:8px 4px; height: 100%;">
                                                <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="backOrGive">

                                                    </el-button> 
                                                </li>
                                                
                                                <li style="margin-top:10px;">
                                                    退换/退款
                                                </li>
                                        </div>

                                        <div style="padding:8px 4px; height: 100%;">
                                            <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="maintenance" @click="turn('/community/repair')">

                                                    </el-button> 
                                            </li>
                                                
                                            <li style="margin-top:10px;">
                                                    维修服务
                                            </li>
                                        </div>
                                        
                                    </div>
                                </div>
                            </ul>
                        
                            <!-- 2 -->   
                            <ul>
                                <div style="padding-bottom: 12px; ">
                                    <div style=" height:95px; font-size: 12px; ">
                                        
                                        <div style="padding:8px 4px; height: 100%;" @click="deliveryAddressButton">
                                                <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="address">

                                                    </el-button> 
                                                </li>
                                                
                                                <li style="margin-top:10px;">
                                                    收货地址
                                                </li>
                                        </div>

                                        <div style="padding:8px 4px; height: 100%;">
                                            <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="collection">

                                                    </el-button> 
                                            </li>
                                                
                                            <li style="margin-top:10px;">
                                                    商品收藏
                                            </li>
                                        </div>
                                        
                                    </div>
                                </div>
                            </ul>

                            <!-- 3 -->   
                            <ul>
                                <div style="padding-bottom: 12px; ">
                                    <div style=" height:95px; font-size: 12px; ">
                                        
                                        <div style="padding:8px 4px; height: 100%;">
                                                <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="Invoice">

                                                    </el-button> 
                                                </li>
                                                
                                                <li style="margin-top:10px;">
                                                    发票服务
                                                </li>
                                        </div>

                                        <div  style="padding:8px 4px; height: 100%;">
                                            <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="myOrder" @click="turn('/trolley')">

                                                    </el-button> 
                                            </li>
                                                
                                            <li style="margin-top:10px;">
                                                    我的订单
                                            </li>
                                        </div>
                                        
                                    </div>
                                </div>
                            </ul>
                            
                            <!-- 4 -->   
                            <ul>
                                <div style="padding-bottom: 12px; ">
                                    <div style=" height:95px; font-size: 12px; ">
                                        
                                        <div style="padding:8px 4px; height: 100%;">
                                                <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="pickUp">

                                                    </el-button> 
                                                </li>
                                                
                                                <li style="margin-top:10px;">
                                                    自提点查询
                                                </li>
                                        </div>

                                        <div style="padding:8px 4px; height: 100%;">
                                            <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="carSite" @click="turn('/community/parking')">

                                                    </el-button> 
                                            </li>
                                                
                                            <li style="margin-top:10px;">
                                                    车位管理
                                            </li>
                                        </div>
                                        
                                    </div>
                                </div>
                            </ul>

                            <!-- 5 -->   
                            <ul>
                                <div style="padding-bottom: 12px; ">
                                    <div style=" height:95px; font-size: 12px; ">
                                        <div @click="goTo_accountInformation" style="padding:8px 4px; height: 100%; ">
                                                <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="personal">

                                                    </el-button> 
                                                </li>
                                                
                                                <li style="margin-top:10px;">
                                                    账号信息
                                                </li>
                                        </div>

                                        <div style="padding:8px 4px; height: 100%;">
                                            <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="progress">

                                                    </el-button> 
                                            </li>
                                                
                                            <li style="margin-top:10px;">
                                                服务进度
                                            </li>
                                        </div>
                                        
                                    </div>
                                </div>
                            </ul>
                            
                            <!-- 6 -->   
                            <ul>
                                <div style="padding-bottom: 12px; ">
                                    <div style=" height:95px; font-size: 12px; ">
                                        
                                        <div style="padding:8px 4px; height: 100%;">
                                                <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="reserve" @click="turn('/community/visitors')">

                                                    </el-button> 
                                                </li>
                                                
                                                <li style="margin-top:10px;">
                                                    预约服务
                                                </li>
                                        </div>

                                        <div style="padding:8px 4px; height: 100%;">
                                            <li ><!-- 上下8 左右4 -->
                                                    <el-button :icon="complaints" @click="turn('/community/complaints')">

                                                    </el-button> 
                                            </li>
                                                
                                            <li style="margin-top:10px;">
                                                    投诉举报
                                            </li>
                                        </div>
                                        
                                    </div>
                                </div>
                            </ul>

                        </div>
                        
                        
                    </div>

                </div>
                

            </div>
        </div>

        <div class="top4">
            <div class="topContent4">
               
                <div class="topContent4-top">

                    <div class="topContent4-topContent">
                       
                        <a href="" style="font-size:24px">我的频道</a>

                    </div>

                </div>

                <div class="topContent4-bottom">

                    <div class="topContent4-bottomContent">
                        <div class="topContent4-bottomContents">
                            <!-- 1 -->
                            <div class="c1">
                                <a href="">
                                     <div style="display:flex; flex-direction: column;
                                     justify-content: center;">

                                        <el-button :icon="announcement" @click="turn('/community/notice')">
                                    
                                        </el-button>
                                        <span>
                                            社区公告
                                        </span>
                                           
                                    </div>
                                </a>
                            </div>
                            
                            <!-- 2 -->
                             
                            <div class="c1">
                                <a href="">
                                     <div style="display:flex; flex-direction: column;
                                     justify-content: center;">
                                    
                                        
                                        <el-button :icon="feedback">
                                    
                                        </el-button>
                                        <span>
                                            体验反馈
                                        </span>
                                           
                                    </div>
                                </a>
                            </div>
                            <!-- 3 -->
                            <div class="c1">
                                <a href="">
                                     <div style="display:flex; flex-direction: column;
                                     justify-content: center;">
                                    
                                        
                                        <el-button :icon="purse">
                                    
                                        </el-button>
                                        <span>
                                            我的公告
                                        </span>
                                           
                                    </div>
                                </a>
                            </div>
                            <!-- 4 -->
                            <div class="c1">
                                <a href="">
                                     <div style="display:flex; flex-direction: column;
                                     justify-content: center;">
                                    
                                        
                                        <el-button :icon="purse">
                                    
                                        </el-button>
                                        <span>
                                            我的公告
                                        </span>
                                           
                                    </div>
                                </a>
                            </div>
                            <!-- 5 -->
                            <div class="c1">
                                <a href="">
                                     <div style="display:flex; flex-direction: column;
                                     justify-content: center;">
                                    
                                        
                                        <el-button :icon="purse">
                                    
                                        </el-button>
                                        <span>
                                            我的公告
                                        </span>
                                           
                                    </div>
                                </a>
                            </div>
                            
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div>
    
    
</template>

<script setup>
import top from '@/views/top-zjm/top.vue'
import { ref,computed } from 'vue'

import { ArrowRight } from '@element-plus/icons-vue'

import purse from '@/components/footerIconsByLzm/lzm-icons/purse.vue'
import purseJinbi from '@/components/footerIconsByLzm/lzm-icons/purseJinbi.vue'
import pOrder from '@/components/footerIconsByLzm/lzm-icons/pOrder.vue'
import backMoney from '@/components/footerIconsByLzm/lzm-icons/backMoney.vue'
import box from '@/components/footerIconsByLzm/lzm-icons/box.vue'

import Invoice from '@/components/footerIconsByLzm/lzm-icons/serviceTools/invoice.vue'
import address from '@/components/footerIconsByLzm/lzm-icons/serviceTools/address.vue'
import backOrGive from '@/components/footerIconsByLzm/lzm-icons/serviceTools/backOrGive.vue'
import personal from '@/components/footerIconsByLzm/lzm-icons/serviceTools/personal.vue'
import reserve from '@/components/footerIconsByLzm/lzm-icons/serviceTools/reserve.vue'
import maintenance from '@/components/footerIconsByLzm/lzm-icons/serviceTools/maintenance.vue'
import complaints from '@/components/footerIconsByLzm/lzm-icons/serviceTools/complaints.vue'
import progress from '@/components/footerIconsByLzm/lzm-icons/serviceTools/progress.vue'
import carSite from '@/components/footerIconsByLzm/lzm-icons/serviceTools/carSite.vue'
import pickUp from '@/components/footerIconsByLzm/lzm-icons/serviceTools/pickUp.vue'
import collection from '@/components/footerIconsByLzm/lzm-icons/serviceTools/collection.vue'
import myOrder from '@/components/footerIconsByLzm/lzm-icons/serviceTools/myOrder.vue'

import announcement from '@/components/footerIconsByLzm/lzm-icons/myChannel/announcement.vue'
import feedback from '@/components/footerIconsByLzm/lzm-icons/myChannel/feedback.vue'
import router from '@/router'
import { Path } from '@/constant'
import { get } from '@/plugins/axios'
import { useUserStore } from '@/stores/pinia'
import { watchEffect } from 'vue';  
const userStore = useUserStore()
const user = computed(() => userStore.loginUser);  
user.value = userStore.loginUser
watchEffect(() => {  
});

const turn=(path)=>{
    router.push(path)
}
const turnTrolley = (selectedType) =>{
    router.push({name:'trolley',query:{st:selectedType}})
    console.dir('turnok')
}


function deliveryAddressButton (){
    router.push('/deliveryAddress')
}
function goTo_accountInformation (){
    router.push('/accountInformation')
}
function goTo_myPurse (){
    router.push('/myPurse/recharge')
}
function goTo_myPurse1 (){
    router.push('/myPurse/account')
}
</script>
<style scoped lang="scss">
*{
    border: 0;
    padding: 0;
    box-sizing: border-box;
    /* background-color: rgb(241, 243, 245); */
}
ul{
    list-style: none;
    li{
        list-style: none;
    }
}
a{
    list-style: none;
    text-decoration: none; /* 去掉下划线 */
    color: inherit; /* 继承父元素的字体颜色 */
    font-weight: normal; /* 去掉粗体 */
    font-style: normal; /* 去掉斜体 */
    font-size: 12px; 
}

.headerTop{
    height:64px;
    margin-left: 10%;
    margin-right:11%;
   /*  border: 0.667px black solid; */
    .headerTop-left{
        width: 100%;
        height: 100%;   
        
        padding-top:24px;
        padding-bottom: 24px;
    }
}
.top1{
   
    height: 200px;
    /* border: 0.667px black solid; */
    margin-left: 8%;
    margin-right:8%;
    .topContent1{
        background-color:rgba(255, 255, 255, 0.521);
        width: calc(100% - 120px);
        height:100%;
        margin-left:60px;
        margin-right:60px;
        border:0 black solid;
        .top1Middle{
           padding-top:32.83px;
                display: flex;
                
           .leftAvatar{
                height:87.992px;
                width: 87.992px;
                margin-left: 66px;
                margin-right: 20px;
                margin-top:23.175px;
                .el-image{
                    height:100%;
                    border-radius: 50%; /* 将元素变成圆形 */
                }
           }
           .middleContent{
            width: 20%;
            /* border: 1px black solid; */
                .el-button{
                    height: 20px;
                    padding-left: 3px;
                    padding-right: 3px;
                    border:0 ;
                    border-radius: 12px;
                    background-color:whitesmoke;
                    margin-top:10px;
                    }
                    .el-button:hover {
                        background-color:whitesmoke;/* 悬停时背景颜色保持不变 */
                        color:currentColor;/* 悬停时文字颜色保持不变 */
                        box-shadow: none; /* 去掉悬停时的阴影效果 */
                        border: 0; /* 确保悬停时边框样式不变 */
                    }
                ul{
                    li{
                        margin-bottom:3px; 
                    }
                }
           }
           .rightContent{
            position: relative;
            display: flex;
            justify-content: center;align-items: center;    
             height: 120px;
             flex: 1;
             ul{
                margin-top:35px ;
                flex:1;
                padding-left:15%;
                border-left:0.667px rgba(0, 0, 0, 0.105) solid;
                align-items: center;
                .L1{
                    font-size:24px;
                }
                .L2{
                    font-size:16px;
                }
             }
           }

        }

        
    }
}

.top2{
    margin-top:24px ;
    height: 197px;
    /* border: 0.667px black solid; */
    margin-left: 8%;
    margin-right:8%;
    .topContent2{
        background-color:rgba(255, 255, 255, 0.521);
        width: calc(100% - 120px);
        height:100%;
        margin-left:60px;
        margin-right:60px;
        border: 0 black solid;
        .topContent2-top{
            padding-top:12px ;
            margin-left:24px ;
            margin-right:24px ;
            height:64px;
            position: relative;
            display: flex;
            .topRight{
                position: absolute;
                right:0px;
                margin-right:4px;
            }
        }
        .topContent-bottomContent{
                display: flex;
                justify-content: space-between;  
                 margin-top:18px;
            ul{
                flex:1;
                text-align: center;
                .el-button{
                    padding-bottom:10px ;
                }
            }     
        }
        
    }
}


.top3{
    margin-top:24px ;
    height: 306px;
    /* border: 0.667px black solid; */
    margin-left: 8%;
    margin-right:8%;
    .topContent3{
        background-color:rgba(255, 255, 255, 0.521);
        width: calc(100% - 120px);
        height:100%;
        margin-left:60px;
        margin-right:60px;
        border: 0 black solid;
        .topContent3-top{
            padding-top: 4px;
            padding-left: 24px;
            padding-right: 24px;
        }
        .topContent3-bottom{
            height: 238px;
            
            .topContent3-bottomContent{
                padding-bottom: 12px;
                padding-top: 12px;
                display: flex;          
                justify-content: space-evenly; /* 子元素之间的空间均匀分布 */
                align-items: center;      /* 子元素在垂直方向上居中对齐 */
                width: 100%;               /* 确保容器占据父元素的宽度 */
                .el-button{
                    height: 48px;
                    width: 48px;
                    font-size: 36px;
                }
            }
        }
        
    }
}

.top4{
    margin-top:24px ;
    height: 211px;
    /* border: 0.667px black solid; */
    margin-left: 8%;
    margin-right:8%;

    .topContent4{
        background-color:rgba(255, 255, 255, 0.521);
        width: calc(100% - 120px);
        height:100%;
        margin-left:60px;
        margin-right:60px;
        border: 0px black solid;
        .topContent4-top{
            height:64px;
            padding-top:4px;
            padding:0px 24px;
            .topContent4-topContent{
                margin-right:16px;
                padding-top:15px;
                margin-bottom:15px;
                height:100%;
            }
        }.topContent4-bottom{
            height:143px;
            .topContent4-bottomContent{
                padding: 12px 0px;

                .topContent4-bottomContents{
                    height:95px;
                    padding-bottom:24px;
                    display:flex;
                    justify-content: space-evenly;
                    align-items: center;
                    position: relative;
                    .c1{
                        position:relative;
                        padding: 8px 4px;

                        .el-button{
                            margin-top:-12px;
                            height: 48px;
                            width:48px;
                            font-size:36px;
                        }
                        span{
                            font-size:14px;
                            margin-top:10px;
                        }

                    }
                }
            }
        }
    }
}
</style>